<template>
	<view>
		<view @touchmove="touchmove" @touchstart="soundStart" @touchend="soundEnd" @touchcancel="soundEnd" class="sound-buttom" :class="{soundState}">
			<text class="sound-text">{{soundState ? '松开 发送' : '按住 说话'}}</text>
			<view class="sound-tip" v-if="soundState">
				<view style="text-align: center;margin-top: 10px;">
					<view class="closeIcon" :style="{'backgroundColor':cancel ? '#f70000' : '#000000'}">
						<uni-im-icons code="e61a" size="20px" color="#FFFFFF"></uni-im-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="record" v-if="soundState">
			<view class="ing"><view class="icon luyin2"></view></view>
			<!-- <view class="cancel" v-if="cancel"><view class="icon chehui"></view></view> -->
			<view class="tis" :class="cancel ? 'change' : ''">
				<text v-if="cancel">松开手指 取消发送</text>
				<text v-if="!cancel">语音录制中</text>
				<text v-if="!cancel && maximum - time <= 10 && maximum - time >= 0">（{{maximum - time}}）s</text>
			</view>
		</view>
	</view>
</template>
<script>
	// #ifndef H5
	const recorderManager = uni.getRecorderManager();
	// #endif
	//const innerAudioContext = uni.createInnerAudioContext();
	//innerAudioContext.autoplay = true;
	
	let soundInterval,soundPath,startTime;
	const windowInfo = uni.getWindowInfo()
	export default {
		emits: ['success','change_scroll'],
		data() {
			return {
				soundState:0,
				soundProgress:0,
				cancel:false,
                is_stop:0,
				time:0
			}
		},
		computed:{
		},
		props:{
			maximum: {
				type: [Number, String],//指定录音的时长，单位秒
				default: 60
			}
		},
		created() {
			// #ifndef H5
			recorderManager.onStop((res)=> {
				console.log('recorderManager.onStop',res.tempFilePath,this.time);
				if(!this.cancel){
					if(this.time < 1 || this.is_stop==1){
						this.is_stop = 0;
                        return false;
					}
                    this.is_stop=0;
                    this.$emit('success',{recordTime: this.time,recordFilePath: res.tempFilePath});
				}else{
					console.log('用户取消了录音功能','this.time:'+this.time);
				}
                return true;
			});
			// #endif
		},
		methods: {
		    change_scroll(type){
		      this.$emit('change_scroll',type);
		    },
			touchmove(e){
				var cannel_btn_w = 40;
				var btnX_l = windowInfo.windowWidth / 2 - cannel_btn_w / 2;
				var btnX_r = windowInfo.windowWidth / 2 + cannel_btn_w / 2;
				var btnY_t = 100 + cannel_btn_w;
				var btnY_b = 100;
				var clientX = e.touches[0].clientX;
				var clientY = windowInfo.windowHeight - e.touches[0].clientY;
				if(clientX >= btnX_l && clientX <= btnX_r && clientY >= btnY_b && clientY <= btnY_t){
					this.cancel = true
				}else{
					this.cancel = false
				}
			},
			soundStart(e){
            if(soundInterval)clearInterval(soundInterval)
				// 关闭正在播放的sound
				//getApp().globalData.uniIm.audioContext.stop()
				
				// #ifdef H5
				// 防止H5端 调试出现鼠标右键菜单
				window.oncontextmenu = function () { return false; }
				// #endif
				
				// #ifdef H5
				return uni.showToast({
					title: 'h5端不支持语音功能',
					icon: 'none'
				});
				// #endif
				recorderManager.start({
					duration: this.maximum * 1000//指定录音的时长
					,sampleRate:16000
				//	,numberOfChannels:2
				//	,format:"mp3"
				});
				startTime = Date.now()
				
				// console.log('soundStart');
			
				//进度条
				this.soundState = 1;
                this.time =0;
                this.change_scroll(1);
				soundInterval = setInterval(()=>{
					// this.soundProgress = parseInt(this.soundProgress) + uni.upx2px(400/this.maximum) +'px'
					// console.log('this.soundProgress',this.soundProgress);
					this.time = parseInt((Date.now() - startTime) / 1000);
                    if(this.time>this.maximum){//超过最大时长结束录制
                        this.soundEnd();
                    }
				},1000)
				// e.preventDefault();
                return true;
			},
			soundEnd(){
				// #ifdef H5
				return
				// #endif
                this.change_scroll(0);
                if(this.time<1){
                    this.is_stop=1;
					uni.showToast({
						title: '语音时间过短!',
                        duration:2000,
                        mask:true,
						icon: 'none'
					});
    				setTimeout(()=> {
    				    recorderManager.stop();
    				}, 1500);
                }else{
                    recorderManager.stop();
                }
				// console.log('soundEnd');
				clearInterval(soundInterval)
				setTimeout(()=> {
					this.soundState = 0
					this.soundProgress = 0
					this.cancel = false
				}, 300);
                return true;
			}
		}
	}
</script>
<style lang="scss">
	.sound-buttom {
		background-color: #ffffff;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 16px;
		align-items: flex-start;
		justify-content: center;
		/* #ifndef APP-NVUE */
		overflow: hidden;
		/* #endif */
		text-align: center;
		position: relative;
	}
	.sound-text{
		position: relative;
		left: -20rpx;
		width: 450rpx;
		font-size: 14px;
		text-align: center;
	}
	.sound-tip{
		position: fixed;
		left: 0;
		bottom: 100px;
		width: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
	.sound-tip-text{
		color: #999999;
		font-size: 18px;
	}
	.closeIcon{
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 100%;
		justify-content: center;
		align-items: center;
		display: inline-block;
		background: #3A3A3A;
	}
	.sound-progress {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0;
		transition: width 0.2s linear;
		background-color: #2faf4c;
		opacity: 0.3;
	}
	.soundState{
		background-color: #efefef;
	}
	.mark{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 110rpx;
		right: 0;
		background:rgba(0,0,0,0.5);
		flex: 1;
	}
	.record{
		width: 50%;
		position: fixed;
		left: 25%;
		bottom: 160px;
		background-color: rgba(0,0,0,.6);
		border-radius: 40rpx;
		.ing{
			width: 100%;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// 模拟录音音效动画
			@keyframes volatility {
				0% {background-position: 0% 130%;}
				20% {background-position: 0% 150%;}
				30% {background-position: 0% 155%;}
				40% {background-position: 0% 150%;}
				50% {background-position: 0% 145%;}
				70% {background-position: 0% 150%;}
				80% {background-position: 0% 155%;}
				90% {background-position: 0% 140%;}
				100% {background-position: 0% 135%;}
			}
			.icon{
				background-image:linear-gradient(to bottom,#6DE802,#fff 50%); 
				background-size:100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip:text; 
				-webkit-text-fill-color:transparent; 
				font-size: 180upx;
				color: #6DE802;
			}
		}
		.cancel{
			width: 100%;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				color: #fff;
				font-size: 180upx;
			}
		}
		.tis{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			font-size: 32rpx;
			color: #fff;
			&.change{
				color: #ffffff;
			}
		}
	}
	@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
	.icon {
		font-family:"HMfont-home" !important;
		font-size: 56upx;
		font-style:normal;
		color: #333;
		&.biaoqing:before {
		  content: "\e797";
		}
		&.jianpan:before {
		  content: "\e7b2";
		}
		&.yuyin:before {
		  content: "\e805";
		}
		&.tupian:before {
		  content: "\e639";
		}
		&.chehui:before {
		  content: "\e904";
		}
		&.luyin:before {
		  content: "\e905";
		}
		&.luyin2:before {
		  content: "\e677";
		}
		&.other-voice:before {
		  content: "\e667";
		}
		&.my-voice:before {
		  content: "\e906";
		}
		&.hongbao:before {
		  content: "\e626";
		}
		&.tupian2:before {
		  content: "\e674";
		}
		&.paizhao:before {
		  content: "\e63e";
		}
		&.add:before {
		  content: "\e655";
		}
		&.close:before {
		  content: "\e607";
		}
		&.to:before {
		  content: "\e675";
		}
	}
</style>
